<template>
  <div>
    <el-button type="primary" @click="openStorageDialog">入库</el-button>
    <el-button type="primary" @click="openDispatchDialog">出库</el-button>
    <el-button type="primary" @click="openQueryDialog">查询</el-button>
    <el-table :data="materials" v-loading="loading">
      <el-table-column prop="material_name" label="物资名称"></el-table-column>
      <el-table-column prop="quantity" label="总数量"></el-table-column>
      <el-table-column prop="in_stock" label="库存数量"></el-table-column>
    </el-table>
    
    <StorageDialog v-if="showStorageDialog" :visible.sync="showStorageDialog" @close="showStorageDialog = false"></StorageDialog>
    <DispatchDialog v-if="showDispatchDialog" :visible.sync="showDispatchDialog" @close="showDispatchDialog = false"></DispatchDialog>
    <QueryDialog v-if="showQueryDialog" :visible.sync="showQueryDialog" @close="showQueryDialog = false"></QueryDialog>
  </div>
</template>

<script>
import StorageDialog from './inventory/StorageDialog.vue';
import DispatchDialog from './inventory/DispatchDialog.vue';
import QueryDialog from './inventory/QueryDialog.vue';
import { fetchMaterials } from '@/api/material';

export default {
  components: { StorageDialog, DispatchDialog, QueryDialog },
  data() {
    return {
      materials: [],
      loading: false,
      showStorageDialog: false,
      showDispatchDialog: false,
      showQueryDialog: false
    };
  },
  methods: {
    openStorageDialog() {
      this.showStorageDialog = true;
      console.log(this.showStorageDialog)
    },
    openDispatchDialog() {
      this.showDispatchDialog = true;
      console.log(this.showDispatchDialog)
    },
    openQueryDialog() {
      this.showQueryDialog = true;
      console.log(this.showQueryDialog)
    },
    async fetchMaterials() {
      this.loading = true;
      try {
        const response = await fetchMaterials();
        this.materials = response.data;
      } catch (error) {
        this.$message.error('获取物资信息失败');
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.fetchMaterials();
  }
};
</script>
